<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.name" placeholder="请输入公司名称"/>
            <EdSelect v-model="queryForm.verifyStatus" :selectParams="selectParams"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="商品列表">
            <ApiTable :api="load" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productNo" label="商品编码"/>
                <el-table-column :show-overflow-tooltip="true" prop="productName" label="商品名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="merchantName" label="店铺名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="type" label="商品类型">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">实物商品</div>
                        <div v-if="scope.row.type == 1">抵扣券</div>
                        <div v-if="scope.row.type == 2">福禄充值</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="商品类别"/>

                <el-table-column :show-overflow-tooltip="true" prop="money" label="价格">
                    <template slot-scope="scope">
                        <span v-if="scope.row.point">{{scope.row.point}} 积分  </span>
                        <span v-if="scope.row.money && scope.row.point">+</span>
                        <span v-if="scope.row.money">{{scope.row.money}} 元</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="设置为热门推荐">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.hotTime ? true : false" @change="changeShowStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="审核状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.verifyStatus == 0">未审核</div>
                        <div v-if="scope.row.verifyStatus == 1">通过</div>
                        <div v-if="scope.row.verifyStatus == 2">驳回</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="seeRow(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>

        <el-drawer
                :title="form.productName + '商品详情'"
                class="drawerShopping"
                :size="640"
                @close="close"
                :visible.sync="drawer">
            <span>
                <el-form :model="form" ref="formRef" size="small">
                <el-form-item label="店铺名称：" class="">{{form.merchantName}}</el-form-item>
                <el-form-item label="商品名称：" class="width-50 inline-block">{{form.productName}}</el-form-item>
                 <el-form-item label="商品价格：" class="width-50 inline-block">
                        <span v-if="form.point">{{form.point}} 积分  </span>
                        <span v-if="form.point && form.money">+</span>
                        <span v-if="form.money">{{form.money}} 元</span>
                </el-form-item>
                <el-form-item label="商品类型：" class="width-50 inline-block">
                    <div v-if="form.type == 0">实物商品</div>
                    <div v-if="form.type == 1">抵扣券</div>
                    <div v-if="form.type == 2">福禄充值</div>
                </el-form-item>
                <el-form-item label="商品类别：" class="width-50 inline-block">{{form.categoryName}}</el-form-item>
                <el-form-item label="审核状态：" class="width-50 inline-block" v-if="isDisabled">
                    <div v-if="form.verifyStatus == 1"><span class="spanWidthStyle marginRight8 spanLabelColor1"></span>通过</div>
                    <div v-if="form.verifyStatus == 2"><span class="spanWidthStyle marginRight8 spanLabelColor4"></span>驳回</div>
                </el-form-item>
                <el-form-item label="商品图片：" class="">
                    <el-image style="width: 95px;height: 70px;margin-right: 7px" v-for="url in form.pics" :key="url" :src="url" :preview-src-list="form.pics"></el-image>
                </el-form-item>
                <el-form-item label="商品详情：" class="">
                    <div class="description" v-html="form.description"></div>
                </el-form-item>

                 <div class="dialog-footer mainBackgroundColor" style="position: fixed;bottom: 0;right: 0;width: 640px;padding-top: 10px">
                     <div style="padding: 0 24px;" v-if="!isDisabled">
                         <el-form-item label="审核：" prop="status" :rules="$validate.validates({required:true,msg:'审核不能为空'})">
                            <el-radio-group class="marginLeft20" v-model="form.status">
                                <el-radio :label="1">通过</el-radio>
                                <el-radio :label="2">不通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="" prop="reason" style="margin: 0 0 10px 0" v-if="showTextarea" :rules="$validate.validates({required:true,msg:'不通过原因不能为空'})">
                            <el-input type="textarea" :rows="2" placeholder="请输入不通过原因" maxLength="100" v-model="form.reason" :resize="'none'"></el-input>
                        </el-form-item>
                     </div>
                   <div class="borderTop006 width-100" style="padding: 24px;text-align: right;">
                        <el-button @click="drawer = false" size="mini" class="el-button-primary-no" style="padding: 8px 13px">取 消</el-button>
                        <el-button type="primary" size="mini" style="padding: 9px 14px" class="el-button-primary-style marginLeft8" @click="onSave" :loading="disabled" :disabled="isDisabled">确 定</el-button>
                   </div>
                </div>
            </el-form>
            </span>
        </el-drawer>
    </Page>
</template>

<script>
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import EdTable from "src/components/EdTable.vue";
    import {productCheck ,setHot ,cancelHot ,detailProduct ,productCheckList} from "src/api/shoppingMall";
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "ExamineList",
        components:{
            EdTable,
            Page, PageCard, ApiTable,
            EdSelect
        },
        computed:{
            showTextarea(){
                return this.form.status === 2;
            }
        },
        data(){
            return{
                selectParams:{
                    options: [
                        {value:0,label:"未审核"},
                        {value:1,label:"通过"},
                        {value:2,label:"不通过"}
                    ],
                    placeholder:"请选择审核状态"
                },
                queryForm:{
                    name:"",
                    verifyStatus:null,
                },
                form:{
                    status:null,
                    productName:"",
                    merchantName:"",
                    categoryName:"",
                    type:"",
                    money:"",
                    point:"",
                    description:"",
                    pics:[],
                    reason:"",
                },
                digQuery:{
                    width:"600px",
                    title:"商品详情"
                },
                rows:{},
                isDisabled:false,
                disabled:false,
                drawer:false,

            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:productCheckList,
            detailProduct(row){
                detailProduct({id:row.id}).then(response => {
                    if(response.code == 20000) {
                        this.form.merchantName = response.data.merchantName;
                        this.form.productName = response.data.productName;
                        this.form.categoryName = response.data.categoryName;
                        this.form.type = response.data.type;
                        this.form.point = response.data.point;
                        this.form.money = response.data.money;
                        this.form.description = response.data.description;
                        this.form.pics = response.data.pics;
                        this.form.verifyStatus = this.rows.verifyStatus;
                    }
                })
            },
            reset(){
                this.queryForm = {
                    name:"",
                    verifyStatus:null,
                };
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            },
            search(){
                this.$refs.table.load(1)
            },
            seeRow(row){
                this.rows = row;
                this.detailProduct(row);
                this.drawer = true;
                this.isDisabled = row.verifyStatus != 0;
            },
            changeShowStatus(row){
                let urlFn = null;
                if(row.hotTime){
                    urlFn = cancelHot;
                }else {
                    urlFn = setHot;
                }
                urlFn({id:row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$refs.table.load(1)
                    }
                })
            },
            onSave(){
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        let query = new Object();
                        query.productId = this.rows.id;
                        query.reason = this.form.reason;
                        query.status = this.form.status;
                        productCheck(query).then(response => {
                            if(response.code == 20000) {
                                this.disabled = false;
                                this.drawer = false;
                                this.$refs.table.load(1)
                            }else {
                                this.disabled = false;
                            }
                        }).catch(()=>{
                            this.disabled = false;
                        })
                    }
                })
            },
            close(){
                this.form = {
                    status:null,
                    productName:"",
                    merchantName:"",
                    categoryName:"",
                    type:"",
                    money:"",
                    point:"",
                    description:"",
                    pics:[],
                    reason:"",
                }
                this.$refs.formRef.resetFields()
            }
        }
    })
</script>

<style lang="scss">
    .drawerShopping{
        .el-drawer__header{
            padding: 18px 24px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            margin-bottom: 0;
            span{
                font-size: 16px;
                font-weight: bold;
                color: rgba(0, 0, 0, 0.85);

            }
        }
        .el-drawer__body{
            padding: 24px;
            .el-form{
                /*padding-bottom: 80px;*/
            }
        }
    }
    .description{
        max-height: 500px;
        overflow-y: auto;
        p{
            margin: 0;
        }
        .detail-content-wrap{
            width: 100%!important;
        }
        .detail-content-item{
            width: 100%!important;
        }
        .pcTP{
            width: 100%!important;
        }
        img{
            width: 100%!important;
            height: auto!important;
            max-width: 100% !important;
        }
    }

    .spanWidthStyle{
        width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
    }
</style>